<template>
  <div>
    <el-dialog
      :title="formData.id ? '邮件模板详情' : '新建邮件模板'"
      v-model="isAdd"
      width="1200px"
      @open="getConfigList"
      :before-close="cancelAdd"
    >
      <el-form
        :model="formData"
        :rules="rules"
        :disabled="formData.id"
        ref="formData"
        label-width="100px"
      >
        <!-- <el-form-item label="模板ID" prop="reachId">
          <el-input
            type="text"
            placeholder="请输入模板ID"
            v-model="formData.reachId"
            @input="setValue('reachId')"
            maxlength="10"
            :show-word-limit="true"
            clearable
          >
          </el-input>
        </el-form-item> -->
        <el-form-item label="模板名称" prop="name">
          <el-input
            type="text"
            placeholder="请输入模板名称"
            v-model="formData.name"
            maxlength="30"
            :show-word-limit="true"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="邮件标题" prop="title">
          <el-input
            type="text"
            placeholder="请输入邮件标题"
            v-model="formData.title"
            maxlength="30"
            :show-word-limit="true"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="邮件配置" prop="configId">
          <el-select
            v-model="formData.configId"
            placeholder="请选择配置"
          >
            <el-option
              v-for="ele in configList"
              :key="ele.id"
              :label="ele.name"
              :value="ele.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            placeholder="请输入备注"
            v-model="formData.remark"
            maxlength="50"
            :show-word-limit="true"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="模板内容" prop="content">
          <!-- <el-input
            type="textarea"
            placeholder="请输入模板内容"
            v-model="formData.content"
          >
          </el-input> -->
          <!-- 富文本编辑器 -->
          <!-- <quill-editor
            v-model:content="formData.content"
            theme="snow"
            contentType="html"
            toolbar="full"
          ></quill-editor> -->
          <RichEditor
            :value="formData.content" 
            @change="handleEditorChange"
            ref="richEditor"
          ></RichEditor>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelAdd">取 消</el-button>
          <el-button v-show="!addData.id" type="primary" @click="formValidate"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import sysConfigApi from "@/api/sysConfigApi";
import reachPipelineApi from "@/api/reachPipelineApi";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import RichEditor from "@/components/RichEditor.vue";
export default {
  components: {
    QuillEditor,
    QuillEditor,
  },
  props: {
    isAdd: {
      require: false,
      type: Boolean,
      default: () => {
        return false;
      },
    },
    addData: {
      require: false,
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    addData: {
      handler(val) {
        if(val.id || this.isAdd) {
          this.formData = JSON.parse(JSON.stringify(this.addData));
           setTimeout(() => {
              this.$refs.richEditor.insertHTML(this.addData.content)
            }, 0);
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      configList: [],
      externalType: "email",
      formData: {
        name: "",
        // reachId: "",
        title: "",
        content: "",
        remark: "",
        configId: "",
      },
      rules: {
        name: [{ required: true, message: "请输入模板名称", trigger: "blur" }],
        // reachId: [{ required: true, message: "请输入模板ID", trigger: "blur" }],
        title: [{ required: true, message: "请输入邮件标题", trigger: "blur" }],
        content: [{ required: true,  message: "请输入模板内容", trigger: "blur" }],
      },
    };
  },
  methods: {
    handleEditorChange({ innerHTML }) {
      this.formData.content = innerHTML;
    },
    formValidate() {
      console.log('[ this.formData ] >', this.formData)
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.addEmailTem();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async getConfigList() {
      if(this.configList.length) {
        return
      }
      let rs = await sysConfigApi.getConfigList({externalType: this.externalType});
      console.log('[ rs ]', rs)
      if (rs.code == 200) {
        this.configList = rs.payload
      }
    },
    // setValue(reachId) {
    //   this.formData[reachId] = this.formData[reachId].replace(/[^\w_]/g,'')
    // },
    async addEmailTem() {
      let rs = await reachPipelineApi.addEmailTem(this.formData);

      if (rs.code === 200) {
        ElMessage.success("添加邮件模板成功");
        this.confirmAdd();
      } else {
        ElMessage.error('添加邮件模板失败')
      }
    },
    cancelAdd() {
      this.$emit("cancelAdd");
      this.formData = {
        name: "",
        // reachId: "",
        title: "",
        content: "",
        remark: "",
        configId: "",
      }
      this.$refs.richEditor.clearEditor(); // 清空富文本数据
      this.$refs.formData.resetFields();
    },
    confirmAdd() {
      this.$emit("confirmAdd");
      this.$refs.formData.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
:deep(.ql-container) {
  width: 100%;
  height: 300px;
}
.el-select {
  width: 100%;
}
</style>
